import React from 'react';
import { Button, Flex, Space, Spin } from 'antd';
import { 
  ReloadOutlined, 
  CopyOutlined, 
  LikeOutlined, 
  DislikeOutlined,
  ShareAltOutlined,
  EllipsisOutlined
} from '@ant-design/icons';
import { Bubble, Prompts, Welcome } from '@ant-design/x';
import '../styles/styles.css';
import { HOT_TOPICS_DATA, DESIGN_GUIDE_DATA } from '../utils/constants';

interface ChatListProps {
  messages: any[];
  onSubmit: (value: string) => void;
}

export const ChatList: React.FC<ChatListProps> = ({ messages, onSubmit }) => {

  // 转换数据格式，添加图标
  const hotTopicsWithIcons = {
    ...HOT_TOPICS_DATA,
    children: HOT_TOPICS_DATA.children.map(item => ({
      ...item,
      icon: <span style={{ color: item.iconColor, fontWeight: 700 }}>{item.iconText}</span>,
    })),
  };

  const designGuideWithIcons = {
    ...DESIGN_GUIDE_DATA,
    children: DESIGN_GUIDE_DATA.children.map(item => {
      // 这里需要根据iconName动态导入图标，简化处理
      const iconMap: Record<string, React.ReactNode> = {
        HeartOutlined: <span>❤️</span>,
        SmileOutlined: <span>😊</span>,
        CommentOutlined: <span>💬</span>,
        PaperClipOutlined: <span>📎</span>,
      };
      return {
        ...item,
        icon: iconMap[item.iconName] || <span>📋</span>,
      };
    }),
  };

  return (
    <div className="chatList">
      {messages?.length ? (
        /* 🌟 消息列表 */
        <Bubble.List
          items={messages?.map((i) => ({
            ...i.message,
            classNames: {
              content: i.status === 'loading' ? 'loadingMessage' : '',
            },
            typing: i.status === 'loading' ? { step: 5, interval: 20, suffix: <>💗</> } : false,
          }))}
          style={{ height: '100%', paddingInline: 'calc(calc(100% - 700px) /2)' }}
          roles={{
            assistant: {
              placement: 'start',
              footer: (
                <div style={{ display: 'flex' }}>
                  <Button type="text" size="small" icon={<ReloadOutlined />} />
                  <Button type="text" size="small" icon={<CopyOutlined />} />
                  <Button type="text" size="small" icon={<LikeOutlined />} />
                  <Button type="text" size="small" icon={<DislikeOutlined />} />
                </div>
              ),
              loadingRender: () => <Spin size="small" />,
            },
            user: { placement: 'end' },
          }}
        />
      ) : (
        <Space
          direction="vertical"
          size={16}
          style={{ paddingInline: 'calc(calc(100% - 700px) /2)' }}
          className="placeholder"
        >
          <Welcome
            variant="borderless"
            icon={
              <img 
                src="/img/logo/DanshineBot2.png" 
                alt="DannyAI Logo" 
                style={{ 
                  width: '64px', 
                  height: '64px', 
                  borderRadius: '12px',
                  objectFit: 'cover'
                }} 
              />
            }
            title="Hello, I'm DannyAI"
            description="基于先进AI技术，提供自然流畅的对话体验，让智能对话更加简单高效~"
            extra={
              <Space>
                <Button icon={<ShareAltOutlined />} />
                <Button icon={<EllipsisOutlined />} />
              </Space>
            }
          />
          <Flex gap={16}>
            <Prompts
              items={[hotTopicsWithIcons]}
              styles={{
                list: { height: '100%' },
                item: {
                  flex: 1,
                  borderRadius: 12,
                  border: 'none',
                },
                subItem: { padding: 0, background: 'transparent' },
              }}
              onItemClick={(info) => {
                onSubmit(info.data.description as string);
              }}
              className="chatPrompt"
            />

            <Prompts
              items={[designGuideWithIcons]}
              styles={{
                item: {
                  flex: 1,
                  borderRadius: 12,
                  border: 'none',
                },
                subItem: { background: '#ffffffa6' },
              }}
              onItemClick={(info) => {
                onSubmit(info.data.description as string);
              }}
              className="chatPrompt"
            />
          </Flex>
        </Space>
      )}
    </div>
  );
};
